const Page = () => {
  return (
    <div className="h-full w-full flex flex-col items-center justify-center bg-gradient-to-r from-blue-50 to-indigo-50">
      <div className="max-w-xs p-4 bg-white rounded-lg shadow-md transform transition-all hover:scale-102 duration-300">
        <div className="flex justify-center mb-3">
          <div className="w-14 h-14 relative">
            <div className="absolute inset-0 bg-gradient-to-r from-yellow-400 to-pink-500 rounded-full animate-pulse"></div>
            <div className="absolute inset-1.5 bg-white rounded-full flex items-center justify-center">
              <span className="text-2xl">💭</span>
            </div>
          </div>
        </div>
        <h2 className="text-lg font-bold text-center text-gray-800 mb-1.5">开始一段对话</h2>
        <p className="text-gray-600 text-center text-xs mb-4">选择一位好友或群组开始聊天吧</p>
        <div className="space-y-2">
          <div className="flex items-center p-1.5 bg-gray-50 rounded-lg">
            <span className="text-lg mr-2">👋</span>
            <p className="text-xs text-gray-700">发送问候，开始交流</p>
          </div>
          <div className="flex items-center p-1.5 bg-gray-50 rounded-lg">
            <span className="text-lg mr-2">📸</span>
            <p className="text-xs text-gray-700">分享图片与精彩瞬间</p>
          </div>
          <div className="flex items-center p-1.5 bg-gray-50 rounded-lg">
            <span className="text-lg mr-2">🎭</span>
            <p className="text-xs text-gray-700">表情包让聊天更生动</p>
          </div>
        </div>
        <div className="mt-4 text-center">
          <p className="text-xs text-gray-500 italic">点击左侧联系人开始对话</p>
        </div>
      </div>
    </div>
  );
};

export default Page;
